<script>
import {updateUser, userDetail} from "../../../api/user";
import {ElMessage} from "element-plus";
import {uploadImage} from "../../../api/file";

export default {
    name: "UserInfo",
    data() {
        return {
            editBox: new Map(),
            user: {},
            file:null
        }
    },

    methods: {
        showEdit(key) {
            var old = this.editBox.get(key);
            this.editBox.set(key, !old)
        },
        getUser() {
            if (!this.$store.state.user){
                const id = this.$store.state.userInfo.userId
                userDetail(id)
                    .then(res => {
                        if (res.code === 200){
                            this.$store.commit('setUser',res.data)
                            this.user = res.data
                        }
                    })
            }else this.user=this.$store.state.user

        },
        saveUser(){
            if (this.file){
                const formdata = new FormData();
                formdata.append('file', this.file);
                uploadImage(formdata)
                    .then(res => {
                        if (res.code===200){
                            this.user.avatar=res.data;
                            this.updateUser()
                        }
                    })
            }else this.updateUser();

        },
        updateUser(){
            updateUser(this.user)
                .then(res=>{
                    if(res.code===200)
                        ElMessage.success("更新成功")
                    else ElMessage.error("更新失败")
                })
        },
        uploadImage(){
            this.file=this.$refs.input.files[0]
            const reader = new FileReader();
            reader.readAsDataURL(this.file)
            const that=this
            reader.onload=function(e){
                that.user.avatar= reader.result;  //或者 e.target.result都是一样的，都是base64码
            }
        }
    },
    created() {
        this.getUser()
    }
}
</script>

<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div style="width: 100%">
                <h2>个人资料</h2>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <div class="flex row center align-center">
                <div style="width: 90px;height: 90px;position: relative;cursor: pointer" >
                    <img :src="user.avatar" alt="" style="height: 90px;width: 90px;position: absolute;border-radius: 50%;cursor: pointer">
                    <input type="file" @change="uploadImage"  ref="input" accept="image/*" style="opacity:0;height: 100%;width: 100%;position: absolute;cursor: pointer">
                </div>
                <div class="flex column center align-center">
                    <h1>{{ user.name }}</h1>
                </div>
            </div>
            <el-divider/>
            <div class="flex column" style="width: 100%">
                <h3 style="width: 100%" class="flex center align-center">基本信息</h3>
                <el-form :model="user" label-width="120px">
                    <el-form-item label="用户昵称:">
                        <span v-if="!editBox.get('name')" class="form-item">{{ user.name }}<i
                            @click="showEdit('name')" class="iconfont icon-edit-square form-icon">编辑</i></span>
                        <div v-if="editBox.get('name')" class="flex row">
                            <el-input v-model="user.name" style="width: 200px"/>
                            <el-button @click="showEdit('name')">确定</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="用户ID:">
                        <span>{{ user.code }}</span>
                    </el-form-item>
                    <el-form-item label="个人简介:">
                        <span v-if="!editBox.get('description')" class="form-item">{{ user.description ? user.description :'未填写' }}<i
                            @click="showEdit('description')" class="iconfont icon-edit-square form-icon">编辑</i></span>
                        <div v-if="editBox.get('description')" class="flex row">
                            <el-input v-model="user.description" style="width: 200px"/>
                            <el-button @click="showEdit('description')">确定</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="个人地址:">
                        <span v-if="!editBox.get('address')" class="form-item">{{ user.address ? user.address : '未填写' }}<i
                            @click="showEdit('address')" class="iconfont icon-edit-square form-icon">编辑</i></span>
                        <div v-if="editBox.get('address')" class="flex row">
                            <el-input v-model="user.address" style="width: 200px"/>
                            <el-button @click="showEdit('address')">确定</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="出生日期:">
                        <span v-if="!editBox.get('birthday')" class="form-item">{{ user.birthday ? user.birthday : '未填写' }}<i
                            @click="showEdit('birthday')" class="iconfont icon-edit-square form-icon">编辑</i></span>
                        <div v-if="editBox.get('birthday')" class="flex row">
                            <el-date-picker type="date" v-model="user.birthday" style="width: 200px"/>
                            <el-button @click="showEdit('birthday')">确定</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <el-button @click="saveUser">保存信息</el-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.form-item {
    .form-icon {
        margin-left: 30px;
        cursor: pointer;
        opacity: 0;
        color: #00a1ba;
    }
}

.form-item:hover {
    .form-icon {
        opacity: 1;
    }
}

.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}
</style>
